<template>
  <button
    class="ms-button"
    @click="handleClick"
    :class="[
      type ? 'ms-button--' + type : '',
      buttonSize ? 'ms-button--' + buttonSize : '',
    ]"
  >
    <slot>button</slot>
  </button>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

@Component({
  name: "MsButton",
})
export default class MsButton extends Vue {
  @Prop({ default: "default" }) size?: "medium" | "small" | "mini";

  @Prop({ default: "" }) type?:
    | "primary"
    | "success"
    | "warning"
    | "danger"
    | "info"
    | "text";

  get buttonSize() {
    return this.size;
  }

  @Emit("click")
  handleClick(ev: any) {
    console.log(`type ${this.type} == size ${this.buttonSize}`);
    return ev;
  }
}
</script>

<style lang="less" scoped>
.ms-button {
  padding: 12px 20px;
  margin: 0;
  outline: none;
  border: 1px solid #dcdfe6;
  color: #606266;
  background: white;
  text-align: center;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }

  &:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
  }

  &.ms-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;

    &:hover,
    &:focus {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
    &:active {
      background: #3a8ee6;
      border-color: #3a8ee6;
      color: #fff;
    }
  }

  &.ms-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;

    &:hover,
    &:focus {
      background: #85ce61;
      border-color: #85ce61;
      color: #fff;
    }
    &:active {
      background: #5daf34;
      border-color: #5daf34;
      color: #fff;
    }
  }

  &.ms-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399;

    &:hover,
    &:focus {
      background: #a6a9ad;
      border-color: #a6a9ad;
      color: #fff;
    }

    &:active {
      background: #82848a;
      border-color: #82848a;
      color: #fff;
    }
  }
  &.ms-button--warning {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;

    &:hover,
    &:focus {
      background: #ebb563;
      border-color: #ebb563;
      color: #fff;
    }

    &:active {
      background: #cf9236;
      border-color: #cf9236;
      color: #fff;
    }
  }
  &.ms-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;

    &:hover,
    &:focus {
      background: #f78989;
      border-color: #f78989;
      color: #fff;
    }

    &:active {
      background: #dd6161;
      border-color: #dd6161;
      color: #fff;
    }
  }
}
</style>
